'use client';

// 分享码预览组件
// REF: API-SHARE189-004@v1.0

import React, { useState } from 'react';
import {
  Eye,
  RefreshCw
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { useToast } from '@/hooks/use-toast';

import { ShareCodePreviewProps } from './types';
import { formatBytes } from './utils';
import { FileTree } from './FileTree';

export function ShareCodePreview({ onPreview, previewResult, loading }: ShareCodePreviewProps) {
  const { toast } = useToast();
  const [previewCode, setPreviewCode] = useState('');
  const [previewAccessCode, setPreviewAccessCode] = useState('');

  const handlePreview = async () => {
    if (!previewCode.trim()) {
      toast({
        title: '请输入分享码',
        description: '分享码不能为空',
        variant: 'destructive'
      });
      return;
    }
    
    await onPreview(previewCode, previewAccessCode);
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Eye className="h-5 w-5" />
          分享码预览
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Input
            placeholder="请输入天翼云分享码"
            value={previewCode}
            onChange={(e) => setPreviewCode(e.target.value)}
          />
          <Input
            placeholder="访问码（可选）"
            value={previewAccessCode}
            onChange={(e) => setPreviewAccessCode(e.target.value)}
          />
        </div>
        <Button 
          onClick={handlePreview} 
          disabled={loading}
          className="w-full"
        >
          {loading ? (
            <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
          ) : (
            <Eye className="h-4 w-4 mr-2" />
          )}
          预览解析
        </Button>
        
        {/* 预览结果 */}
        {previewResult && (
          <div className="mt-4 p-4 bg-gray-50 rounded-lg">
            <h4 className="font-medium text-gray-900 mb-2">预览结果</h4>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-600">标题:</span>
                <span>{previewResult.shareInfo.title}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">文件数:</span>
                <span>{previewResult.shareInfo.fileCount}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">总大小:</span>
                <span>{formatBytes(previewResult.shareInfo.totalSize)}</span>
              </div>
              {previewResult.shareInfo.expireTime && (
                <div className="flex justify-between">
                  <span className="text-gray-600">过期时间:</span>
                  <span>{previewResult.shareInfo.expireTime}</span>
                </div>
              )}
            </div>
            
            {/* 文件树预览 */}
            <div className="mt-4">
              <h5 className="font-medium text-gray-900 mb-2">文件列表</h5>
              <div className="max-h-40 overflow-y-auto border rounded">
                <FileTree nodes={previewResult.fileTree} />
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

export default ShareCodePreview;